<template lang="html">
  <div class="">
  	
  	
		<div class="center">
      <img src="../../assets/index-img.png" alt="">
      <div class="center-log hend"  @click="showIsShow=!showIsShow">
      	登陆
      </div>
      <router-link to='forget' tag="div" @click="aaa()"class="center-login hend">
            	申请加入
      </router-link>
    </div>
		<ul class="buttom">
			<li class="hend">
				<div class="buttom-img">
					<img src="../../assets/index-1.png"/>
				</div>
				<h3>货源丰富</h3>
				<p>海量正品货源任你选，品质优！无存库压力，厂家原价货源，意向点击咨询</p>
				<p></p>
			</li>
			<li class="hend">
				<div class="buttom-img">
					<img src="../../assets/index-2.png"/>
				</div>
				<h3>货源丰富</h3>
				<p>海量正品货源任你选，品质优！无存库压力，厂家原价货源，意向点击咨询</p>
				<p></p>
			</li>
			<li class="hend">
				<div class="buttom-img">
					<img src="../../assets/index-3.png"/>
				</div>
				<h3>货源丰富</h3>
				<p>海量正品货源任你选，品质优！无存库压力，厂家原价货源，意向点击咨询</p>
				<p></p>
			</li>
			<li class="hend">
				<div class="buttom-img">
					<img src="../../assets/index-4.png"/>
				</div>
				<h3>货源丰富</h3>
				<p>海量正品货源任你选，品质优！无存库压力，厂家原价货源，意向点击咨询</p>
				<p></p>
			</li>
			<li class="hend">
				<div class="buttom-img">
					<img src="../../assets/index-5.png"/>
				</div>
				<h3>货源丰富</h3>
				<p>海量正品货源任你选，品质优！无存库压力，厂家原价货源，意向点击咨询</p>
				<p></p>
			</li>
			<li class="hend">
				<div class="buttom-img">
					<img src="../../assets/index-6.png"/>
				</div>
				<h3>货源丰富</h3>
				<p>海量正品货源任你选，品质优！无存库压力，厂家原价货源，意向点击咨询</p>
				<p></p>
			</li>
			
		</ul>
		<div class="log-form" v-show="showIsShow">
			<div class="log-form-son">
				<p class="hend"  @click="showIsShow=!showIsShow">X</p>
				<div class="log-form-logo">
					<img src="../../assets/logo.png"/>
				</div>
				<input type="text" placeholder="请输入登录账号" />
				<input type="password" placeholder="请输入登录密码" />
				<input type="button" value="登陆" class="btn hend"  @click="showIsShow=!showIsShow"/>
				<div class="bon">
					<router-link to='apply' tag="span" class="pass hend">忘记密码？</router-link>
					<router-link to='forget' tag="span" class="enroll hend">免费注册</router-link>
				</div>
			</div>
		</div>

  </div>
</template>
<script>
export default {
	data() {
			return {
				showIsShow: false
			}
		},
		methods:{
			aaa(){
				alert(123)
			}
		}
}
</script>

<style>
	.center{
		position: relative;
		
	}
	.center div{
		height: 50px;
		width: 140px;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		line-height: 50px;
	}
	.center-log{
		color: #1e59b3;
		background: #fff;
		position: absolute;
		bottom: 84px;
		left: 650px;
	}
	.center-login{
		color: #fff;
		position: absolute;
		bottom: 84px;
		left: 810px;
		border: 1px solid #fff;
	}
	.buttom{
		margin-left: 50px;
		width: 1200px;
 	}
 	.buttom:active{
		content: '';
		display:block;
		clear:both
	}
	.buttom li{
		padding-top: 40px;
		float: left;
		margin-left: 100px;
		width: 300px;
		text-align: center;
	}
	.buttom li h3{
		line-height: 50px;
	}
	.buttom li p{
		line-height: 24px;
	}
	.buttom:active{
		content: '';
		display:block;
		clear:both
	}
	.log-form{
		background: rgba(0,0,0,0.5);
		width: 1600px;
		height: 1028px;
		position: absolute;
		top: 0;
	}
	.hend{
		cursor: pointer;
	}
	.log-form-son{
		position: absolute;
		left: 50%;
		margin-left: -250px;
		top: 50%;
		margin-top: -250px;
		padding: 40px 0;
		width: 500px;
		text-align: center;
		background: #fff;
	}
	.log-form-son p{
		position: relative;
		top: -25px;
		right: -220px;
		text-align: right;
		display: inline-block;
	}
	.log-form-son input{
		outline:none; 
		border:none;
		background:none;
		border: 1px solid #efeff9;
		width: 278px;
		height: 38px;
		/*line-height: calc();*/
		text-align: center;
		background: #f5f6fb;
		margin: 9px 0;
		border-radius: 2px;
	}
	.log-form-son .btn{
		color: #fff;
		background: #0052ff;
	}
	.log-form-son .bon{
		margin: 0 auto;
		width: 278px;
		font-size: 12px;
	}
	.log-form-son .bon:active{
		content: '';
		display:block;
		clear:both
	}
	.log-form-son .pass{
		float: left;
		color: #9499ad;
	}
	.log-form-son .enroll{
		float: right;
		color: #c87265;
	}
</style>
